//详情弹窗
<template>
  <el-dialog
    :title="title"
    custom-class="dialogStyle1 detailsPopup"
    :close-on-click-modal="false"
    :append-to-body="true"
    :visible.sync="show"
  >
    <el-form ref="form" :model="form" label-width="100px" v-if="form">
      <el-form-item label="电子健康卡ID:">
        <el-input v-model="form.id" :disabled="isLook"></el-input>
      </el-form-item>
      <el-form-item label="证件号:">
        <el-input v-model="form.idCard" disabled></el-input>
      </el-form-item>
      <el-form-item label="用户姓名:">
        <el-input v-model="form.name" disabled></el-input>
      </el-form-item>
      <el-form-item label="用户性别:">
        <el-select v-model="form.sex" style="width:100%;" :disabled="isLook" @change="changeSex">
          <el-option v-for="item in sexs" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
       <el-form-item label="居住地址:">
        <el-input :value="form.address" disabled></el-input>
      </el-form-item>
      <el-form-item label="出生日期:">
        <el-input :value="form.birthday" disabled></el-input>
      </el-form-item>
      <el-form-item label="手机号码:">
        <el-input v-model="form.cellphone" :disabled="isLook"></el-input>
      </el-form-item>
      <el-form-item label="联系电话:">
        <el-input :value="telephone(form.telephone)" disabled></el-input>
      </el-form-item>
      <el-form-item label="创建时间:">
        <el-input :value="getFormatTime(form.createTime)" disabled></el-input>
      </el-form-item>
      <el-form-item label="修改时间:">
        <el-input :value="getFormatTime(form.editeTime)" disabled></el-input>
      </el-form-item>
      <el-form-item label="国籍:">
        <el-input :value="form.nationality" disabled></el-input>
      </el-form-item>
      <el-form-item label="申请机构:">
        <el-input v-model="form.orgName" disabled></el-input>
      </el-form-item>
      <el-form-item v-if="!isLook" style="text-align:center;padding-right:50px;">
        <el-button size="medium" type="success" @click.stop="change" :loading="changeLoading">确认修改</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>
<script>
import store from "@/store";
import { getFormatTime, notify } from "@/utils/index";
import { isvalidPhone } from "@/utils/validate";
import { changeUserNews } from "@/api/users";
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      show: false,
      form: null,
      isLook: true,
      sexValue: null,
      changeLoading: false
    };
  },
  computed: {
    ...mapGetters("parameter/", ["sexs"]),
    title() {
      return this.isLook ? "查看用户详情" : "修改用户信息";
    }
  },
  methods: {
    getFormatTime,
    gender(val) {
      return val ? parseInt(val) : 0;
    },
    time(val) {
      return val ? getFormatTime(parseInt(val)) : "---";
    },
    unit(val) {
      return val ? val : "---";
    },
    telephone(val) {
      return val ? val : "---";
    },
    changeSex(val) {
      this.sexValue = val;
    },
    //确认修改
    change() {
      if (this.changeLoading) return false;
      if (!isvalidPhone(this.form.cellphone)) {
        notify("请输入正确的电话号码", "error", "失败");
        return false;
      }
      let data = {
        idNo: this.form.idNo,
        vuid: this.form.vuid,
        gender: this.sexValue ? this.sexValue : this.form.gender,
        cellphone: this.form.cellphone
      };
      this.changeLoading = true;
      changeUserNews(data)
        .then(res => {
          if (res.code === 10000) {
            notify("修改成功", "success", "成功", 800);
            this.$emit("update");
          } else {
            notify(res.message, "error", "失败", 800);
          }
          this.changeLoading = false;
        })
        .catch(err => {
          this.changeLoading = false;
        });
    }
  }
};
</script>
<style lang='scss' scoped>
@import "~@/assets/styles/dialog.scss";
/deep/ .detailsPopup {
  width: 750px;
}
</style>